<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta http-equiv="pragma" content="no-cache">  
	<meta http-equiv="cache-control" content="no-cache">  
	<meta http-equiv="expires" content="0"> 
    <title>方法管理</title>
    <script src="dist/js/jquery-1.9.1.min.js"></script> 
    <link rel="stylesheet" href="dist/css/normalize.css">
    <link rel="stylesheet" href="dist/css/bootstrap.css">
    <link rel="stylesheet" href="dist/css/index_public.css">
    <link rel="stylesheet" href="dist/css/index_table.css">
    <link rel="stylesheet" href="dist/css/ladda/ladda-themeless.min.css">
    <script src="dist/js/js/index_head_left.js"></script>
    <link rel="stylesheet" href="dist/css/toastr.min.css" >
	<script src="dist/js/widgets/toastr.min.js"></script>
	<script type="text/javascript" src="dist/js/widgets/jquery.nicescroll.min.js"></script>

    <!-- alert11.17 -->
    <link rel="stylesheet" href="dist/css/sweetalert.css">
    <script src="dist/js/widgets/sweetalert.min.js"></script>
    <style>
    	.option{line-height:0;width:97%;margin-left:1%;border:1px solid #ECEFF5;border-bottom:0;padding-top:5px;}
    	input{outline:none;}
    	.ladda-label{color:#fff;}
    </style>
	</head>
    <script>
         $(document).ready(function(){
            $("#div1").load('include/left_title.html',function(){
                menu(); 
            })
            $("#loadHeader").load("include/header.html",function(){
                header();
            })
            $("#personal").load("include/modelpersonal.html",function(){
                personalModel();
            })
            getData();
            $('#add').on('hidden.bs.modal', function () {
                   $("#add .modal-body>div>input").val('');
            })
    	});
         
       //获取菜单数据
         function getData(){
        	 
    	   var name = '';
    	   name = $("#serarch_name").val();
        	 $.ajax({
     			type:"POST",
     			url:"actionServlet",
     			data:{"actionName":"permissionService","method":"getAllFunc","name":name},
     			dataType:"JSON",
     			success:function(data){
     				if(data.statusCode == 100){
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
     				if(data.statusCode == 1){
     					var htmlStr = $("#demo_tr").html();
     					$("#role_table").empty();
     					$("#role_table").append("<tr id='demo_tr' style='display:none'>" + htmlStr+ "</tr>");
     					for(var i=0;i<data.result.length;i++){
     						var newStr = "<tr>" + htmlStr+"</tr>";
     						newStr = newStr.replace("#funcId#",data.result[i].id);
     						newStr = newStr.replace("#funcName#",data.result[i].name);
     						newStr = newStr.replace("#funcUrl#",data.result[i].url);
     						
     						$("#role_table").append(newStr);
     					}
     					
     				}
     			}
     		});
         }
         
       //新增菜单
         function saveFunc(){
        	 
        	 var name = $("#func_name").val();
        	 var url = $("#func_url").val();
			 if(name==''){
				 toastr.warning('请输入方法名称','提示');
	 			 return; 
			 }
			 if(url==''){
				 toastr.warning('请输入方法路径','提示');
	 			 return; 
			 }
			 $('.btn-ladda').ladda( 'bind');
			 Ladda.bind( '.progress-demo .ladda-button',{
			 	callback: function( instance ){
			 	var progress = 0;
			 	var interval = setInterval( function(){
			 	progress = Math.min( progress + Math.random() * 0.1, 1 );
			 	instance.setProgress( progress );
			  	if( progress === 1 ){
			 		instance.stop();
			 		clearInterval( interval );
			 		 }
			 	  }, 200 );
			 		}
			 });
			 var l = $('.btn-ladda').ladda();
			 l.ladda( 'start' );
        	 $.ajax({
      			type:"POST",
      			url:"actionServlet",
      			data:{"actionName":"permissionService","method":"saveFunc","name":name,"url":url},
      			dataType:"JSON",
      			success:function(data){
      				if(data.statusCode == 100){
      					l.ladda( 'stop' );
		 				toastr.error('请联系管理员','未拥有权限');
		 				return;
		 			}
      				if(data.statusCode == 1){
      					getData();
      					$("#btn_cancel").click();
      					l.ladda( 'stop' );
      					swal({
      			            title: "",
      			            text: "新增成功!",
      			            type: "success"
      			        });
      				}
      			}
      		});
         }
       
       
       function deleteFunc(id){
    	   swal({
    		   title: '确定要删除该方法么',
    		   text: '',
    		   type: 'warning',
    		   showCancelButton: true,
    		   closeOnConfirm: false, 
    		   confirmButtonText: '删除',
    		   cancelButtonText: '取消',
    		 }, function() { 
    			 
    			 $.ajax({
    	     			type:"POST",
    	     			url:"actionServlet",
    	     			data:{"actionName":"permissionService","method":"deleteFunc","id":id},
    	     			dataType:"JSON",
    	     			success:function(data){
    	     				if(data.statusCode == 100){
    			 				toastr.error('请联系管理员','未拥有权限');
    			 				return;
    			 			}
    	     				if(data.statusCode == 1){
    	     					getData();
    	     					swal({
    	      			            title: "",
    	      			            text: "删除成功!",
    	      			            type: "success"
    	      			        });
    	     				}
    	     			}
    	    	   });
    			 
    			 
    		}); 
       }
         
		     
    </script>
<body>
 <div class="container-fluid">
     <!-- header  -->
    <div class="nav row " id="loadHeader">
    </div>
    <div class="row neirong" >
        <!-- 侧边导航 -->
         <div id="div1" class="sidebar col-xs-2">
            
        </div>
        <!-- 主题内容 -->
        <div class="main col-xs-10 row " style="min-height:800px">
                <h4 class="col-xs-12">方法管理</h4>
                <div class="col-xs-12 row option">
                        <a class="btn btn-primary" data-toggle="modal" data-target="#add" href="#add" style="margin-left:-8px;">
                            	新增方法
                        </a>
<!--                         <a onclick="getData()" class="btn btn-primary" style="float:right">搜索</a> -->
                        <a onclick="getData()" class="btn btn-primary" style="float:right;border-radius:0;border-top-right-radius: 3px;border-bottom-right-radius: 3px;background:#1986DF;border-color:#1986DF">
                        	<span class="glyphicon glyphicon-search" style="color:#fff;"></span>
                        </a>
                        <input id="serarch_name" type="text" class="form-control" style="float:right;border-radius:0;border-color:#1986DF;width:300px;height:34px;border-top-left-radius: 3px;border-bottom-left-radius: 3px;" placeholder="请输入方法名"> 
                </div>
               
             <table class="col-xs-12" id="clerka"  style="width:97%;margin-left:1%;" >
                <thead>
                    <tr>
                       <th>方法名称</th>
                       <th>方法路径</th>
                       <th>操作</th>
                    </tr>
                </thead>
                <tbody id="role_table">
                    <tr id="demo_tr" style="display:none">
                        <td>
                        	#funcName#
                        </td>
                        <td>
                        	#funcUrl#
                        </td>
                        <td>
                            <a class="btn btn-danger" onclick="deleteFunc('#funcId#')">删除</a> 
                        </td> 
                    </tr>
                </tbody>
            </table>                   
        </div>
        </div>
        <div class="row" id="divFooter"></div> 
        </div>
        
    <div class="modal inmodal in" id="add" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
        	<div class="modal-content animated bounceInRight">
                <div class="modal-body" style="text-align:center">
                	<h2>新增方法</h2>
                	<div style="margin-top:10px">
                		<label>方法名称:</label>
                		<input style="margin-left:10px" id="func_name" type="text" class="form-control">
                	</div>
                	<div style="margin-top:10px">
                		<label>方法路径:</label>
                		<input style="margin-left:10px" id="func_url" type="text" class="form-control">
                	</div>
                </div>
                <div class="modal-footer">
                    <button id="btn_cancel" type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary ladda-button btn-ladda" data-style="zoom-out" onclick="saveFunc()">保存</button>
                </div>
            </div>
        </div>
    </div>



<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/ladda/spin.min.js"></script>
<script src="dist/js/ladda/ladda.min.js"></script>
<script src="dist/js/ladda/ladda.jquery.min.js"></script>
</body>
</html>